<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<link rel="shortcut icon" th:href="@{/img/favicon.ico}" type="image/x-icon" />
<link th:href="@{/css/allBooks.css}" href="../static/css/allBook.css" rel="stylesheet" type="text/css" >
<link th:href="@{/css/bootstrap.css}" href="../static/css/bootstrap.css" rel="stylesheet" type="text/css" >
<script th:src="@{/js/jquery-3.4.1.min.js}" src="../static/js/jquery-3.4.1.min.js"></script>
<script th:src="@{/js/bootstrap.bundle.js}" src="../static/js/bootstrap.bundle.js"></script>
<script th:src="@{/js/bootstrap.min.js}" src="../static/js/bootstrap.min.js"></script>
<style>
    .breadcrumb-item+.breadcrumb-item::before{
        display: inline-block;
        padding-right: 0.5rem;
        color: #6c757d;
        content: ">";
    }
</style>
<body>
<div class="container" style="margin-top: 5px">
<!--    头部导航栏 -->
    <header>
        <ul class="nav nav-tabs nav-justified">
            <li class="nav-item active"><a class="nav-link active" href="#" style="font-family: 'Sitka Subheading'"><strong>Book System</strong> </a></li>
            <li class="nav-item "><a class="nav-link disabled" href="#"></a></li>
            <li class="nav-item "><a class="nav-link disabled" href="#"></a></li>
            <li class="nav-item "><a class="nav-link disabled" href="#"></a></li>
            <li class="nav-item "><a class="nav-link disabled" href="#"></a></li>
            <li class="nav-item dropdown" style="margin-top: 8px"><img style="width: 32px;height: 32px;border-radius: 15px" src="../static/img/tx.jpg" th:src="@{/img/tx.jpg}" >&nbsp;
                <a href="#" class="dropdown-toggle" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" sec:authentication="name" style="color: #b8daff;font-size: 17px">未登录</a>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                    <a class="dropdown-item" th:href="@{/addUser}">添加管理</a>
                    <a class="dropdown-item" th:id="hy" th:href="@{#}">黑夜模式</a>
                    <a class="dropdown-item" th:href="@{/logout}">退出登录</a>
                </div>
            </li>
        </ul>
    </header>
<!--    <%&#45;&#45;    banner区&#45;&#45;%>-->
    <div class="bannerl carousel slide" data-ride="carousel" id="demo" style="margin: 6px auto">
        <ul class="carousel-indicators">
            <li data-target="#demo" data-slide-to="0" class="active"></li>
            <li data-target="#demo" data-slide-to="1"></li>
            <li data-target="#demo" data-slide-to="2"></li>
        </ul>

<!--         轮播图片 -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img  th:src="@{/img/banner6.jpg}" style="width: 100%;height: 293px">
            </div>
            <div class="carousel-item">
                <img th:src="@{/img/banner3.jpg}" style="width: 100%;height: 293px">
            </div>
            <div class="carousel-item">
                <img th:src="@{/img/banner4.jpg}" style="width: 100%;height: 293px">
            </div>
        </div>

<!--         左右切换按钮 -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
    <div style="height: 48px;background-color: #e9ecef;margin-bottom: 20px">
        <div class="row " style="margin-bottom: 2px">

            <div class="col-md-8 ">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">首页</li>
                        <li class="breadcrumb-item active" aria-current="page">书籍列表</li>
                    </ol>
                </nav>
            </div>
            <div class="col-md-4">
                <form style="margin-top: 6px" class="form-inline" method="post" th:action="@{/byName}">
                    <input class="form-control" type="search" name="bookName" placeholder="search for....">
                    <button class="btn btn-primary " type="submit" id="btn">Search</button>
                </form>
            </div>
        </div>
    </div>
<table class="table table-hover table-striped table-bordered text-center" style="margin-top: -18px">
    <thead>
    <tr>
        <th>书籍编号</th>
        <th>书籍名称</th>
        <th>书籍数量</th>
        <th>书籍详情</th>
        <th><a href="#" style="text-decoration: none">操作</a>&nbsp;|
            <a th:href="@{/addBook}" href="addBook.html"
               style="text-decoration: underline; ">新增</a>
        </th>
    </tr>
    </thead>
    <tbody id="contents">

        <tr th:each="lists,varStatus:${list}" >

            <td th:text="${varStatus.index+1}"></td>
            <td th:text="${lists.bookName}"></td>
            <td th:text="${lists.bookCounts}"></td>
            <td th:text="${lists.detail}"></td>
            <td class="cz">
                <a th:href="@{'update/toUpdateBook/'+${lists.bookID}}" href="updateBook.html"
                   class="btn btn-primary"  style=" margin: -8px auto;">修改</a>&nbsp;|
                <a th:id="delete_btn" th:bookid="${lists.bookID}"
                   class="btn btn-primary" style=" margin: -8px auto;">删除</a>
            </td>
<!--            th:href="@{'delete/deleteBook/'+${lists.bookID}}"-->
        </tr>

    </tbody>
</table>
    <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center" style="margin-left: 10px;position: absolute">
            <li th:if="${page.isIsFirstPage()}" class="page-item"><a class="page-link" >&laquo;</a></li>
            <li th:if="${page.isHasPreviousPage()}" class="page-item"><a class="page-link" th:href="@{/index/(currentPage=${page.getPageNum()}-1)}">&laquo;</a></li>
            <li th:each="i:${#numbers.sequence(page.getNavigateFirstPage(),page.getNavigateLastPage())}" class="page-item">
                <a  class="page-link" th:href="@{/index/(currentPage=${i})}" th:text="${i}">1</a>
            </li>

            <li th:if="${page.isIsLastPage()}" class="page-item"><a class="page-link" >&raquo;</a></li>
            <li th:if="${page.isHasNextPage()}" class="page-item"><a class="page-link" th:href="@{/index/(currentPage=${page.getPageNum()}+1)}">&raquo;</a></li>
        </ul>
    </nav>
</div>
<script type="text/javascript">
    //删除
    $(document).on("click", "#delete_btn", function () {
        //删除确认框
        var empName = $(this).parents("tr").find("td:eq(1)").text();
        if (confirm("确认删除【" + empName + "】吗？")) {
            var emp_ids = $(this).attr("bookid");

            $.ajax({
                url: "/delete/deleteBook",
                type: "DELETE",
                data: "bookId=" + emp_ids,
                success: function (result) {
                    alert(result.msg);
                }
            });
            setTimeout(()=>{
                location.reload()
            },1000)
        }
    });
    $(document).on("click", "#hy", function () {
      document.body.style.backgroundColor="#b2b2b2"
         document.getElementById('hy').innerText="白夜模式";
       var hys=document.getElementById('hy');
       if (hys.innerText==="白夜模式"){
           $(document).on("click", "#hy", function () {
               setTimeout(()=>{
                   location.reload();
               },400)

           })

       }
    });
    </script>
</body>
</html>